import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class WaterfallIndex extends StatefulWidget {
  const WaterfallIndex({Key? key}) : super(key: key);

  @override
  _WaterfallIndexState createState() => _WaterfallIndexState();
}

class _WaterfallIndexState extends State<WaterfallIndex> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('waterfall')),
      body: CustomScrollView(shrinkWrap: true, slivers: [
        // SliverStaggeredGrid.countBuilder(
        //   crossAxisCount: 4,
        //   itemCount: 4,
        //   itemBuilder: (BuildContext context, int index) {
        //     return Container(
        //         height: index.isEven ? 300 : 100,
        //         color: index.isEven ? Colors.green : Colors.red,
        //         child: new Center(
        //           child: new CircleAvatar(
        //             backgroundColor: Colors.white,
        //             child: new Text('$index'),
        //           ),
        //         ));
        //   },
        //
        //   /// StaggeredTile的使用
        //   /// StaggeredTile.count：固定纵轴和主轴上的数量
        //   /// StaggeredTile.extent：纵轴上的数量和主轴上的最大范围
        //   /// StaggeredTile.fit：纵轴上的数量
        //   /// StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果。
        //
        //   staggeredTileBuilder: (int index) {
        //     return StaggeredTile.fit(2);
        //     // return StaggeredTile.count(2, index.isEven ? 2 : 1);
        //     // return  StaggeredTile.count(2, index == 0 ? 2.5 : 3);
        //   },
        //   mainAxisSpacing: 4.0,
        //   crossAxisSpacing: 4.0,
        // ),
        // SliverToBoxAdapter(
        //   child:SizedBox(height:10),
        // ),
        SliverToBoxAdapter(
            child: RefreshIndicator(
          onRefresh: () async {
            await Future.delayed(Duration(seconds: 2));
          },
          child: Container(
            height: MediaQuery.of(context).size.height,
            child: StaggeredGridView.countBuilder(
              shrinkWrap: true,
              crossAxisCount: 4,
              itemCount: 8,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: index.isEven ? Colors.green : Colors.red,
                  height: index.isEven ? 300 : 100,
                  child: new Center(
                    child: new CircleAvatar(
                      backgroundColor: Colors.white,
                      child: new Text('$index'),
                    ),
                  ));

              },

              /// StaggeredTile的使用
              /// StaggeredTile.count：固定纵轴和主轴上的数量
              /// StaggeredTile.extent：纵轴上的数量和主轴上的最大范围
              /// StaggeredTile.fit：纵轴上的数量
              /// StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果。

              staggeredTileBuilder: (int index) {
                return StaggeredTile.fit(2);
                // return StaggeredTile.count(2, index.isEven ? 2 : 1);
                // return  StaggeredTile.count(2, index == 0 ? 2.5 : 3);
              },
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          ),
        ))
      ]),
    );
  }
}
